<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no"/>
    <title>全部列表</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../css/common2.css"/>
    <link rel="stylesheet" type="text/css" href="../css/aui-flex.css"/>
    <style>
        .aui-tab-nav li {
            color: #90caf9 !important;
        }

        .header {
            position: fixed;
            top: 0;
            width: 100%;
            background: rgba(0, 0, 0, 0);
        }
    </style>
</head>
<body>

<header class="header
">
    <ul class="aui-text-center">
        <li class="aui-border-b aui-padded-5" onclick="openToTwo('headerHideShow')">头部滑动显示隐藏</li>
    </ul>
</header>
<div class="move" style="height: 2500px;">
    <ul>
        <li class="aui-padded-20-0">列表00</li>
        <li class="aui-padded-20-0">列表</li>
        <li class="aui-padded-20-0">列表00</li>
        <li class="aui-padded-20-0">列表00</li>
        <li class="aui-padded-20-0">列表00</li>
        <li class="aui-padded-20-0">列表</li>
        <li class="aui-padded-20-0">列表</li>
        <li class="aui-padded-20-0">列表</li>
        <li class="aui-padded-20-0">列表</li>
        <li class="aui-padded-20-0">列表</li>
        <li class="aui-padded-20-0">列表</li>
        <li class="aui-padded-20-0">列表</li>
        <li class="aui-padded-20-0">列表</li>
        <li class="aui-padded-20-0">列表</li>
        <li class="aui-padded-20-0">列表</li>
        <li class="aui-padded-20-0">列表</li>
        <li class="aui-padded-20-0">列表</li>
        <li class="aui-padded-20-0">列表</li>
    </ul>
</div>


</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/jquery.min.js"></script>
<script type="text/javascript">
    apiready = function() {
        api.parseTapmode();
        var header = $api.dom('header');
        $api.fixIos7Bar(header);
    }
    $(function () {
        var winHeight = $(document).scrollTop();

        $(".move").on("touchmove", function () {
            var scrollY = $(document).scrollTop();// 获取垂直滚动的距离，即滚动了多少
            var color = 0.0025 * scrollY;

            console.log(color + "c" + scrollY);
            $(".header").css({"background": "rgba(0,0,0," + color + ")"})
//            if (scrollY > 550){ //如果滚动距离大于550px则隐藏，否则删除隐藏类
//                $('.top-title').addClass('hiddened');
//            }
//            else {
//                $('.top-title').removeClass('hiddened');
//            }
//
//            if (scrollY > winHeight){ //如果没滚动到顶部，删除显示类，否则添加显示类
//                $('.top-title').removeClass('showed');
//            }
//            else {
//                $('.top-title').addClass('showed');
//            }

        });
        $(window).scroll(function () {
            var scrollY = $(document).scrollTop();// 获取垂直滚动的距离，即滚动了多少
            var color = 0.0025 * scrollY;

            console.log(color + "c" + scrollY);
            $(".header").css({"background": "rgba(0,0,0," + color + ")"})
        });
    })
    //    $(window).touchmove(function () {
    //
    //    });
</script>
</html>
